<template>
  <div>
    <div class="productList">
      <div
        v-for="item in productList"
        :key="item.productId"
        class="product"
      >
        <img
          class="product-img"
          :src="item.productPicture"
        >
        <div class="product-name">{{ item.productName }}</div>
        <div class="product-desc">{{ item.productDesc }}</div>
        <div class="product-price">{{ item.productPrice }}</div>
        <el-input-number
          v-model="item.productNumber"
          class="product-number"
          @change="updateTotalPrice"
        />
      </div>
    </div>
    <div class="address">
      <div
        v-if="address.addressId"
        class="addressInfo"
      >
        <div>收货地址：{{ address.address }}</div>
        <div>联系电话：{{ address.phone }}</div>
        <div>邮政编码：{{ address.postalCode }}</div>
        <div>收货人姓名：{{ address.receiveName }}</div>
      </div>
      <el-button
        class="addressSelectBtn"
        @click="openAddressList"
      >选择地址</el-button>
    </div>
    <div class="totalPrice">{{ order.totalPrice }}</div>
    <el-button @click="submitOrder">立即下单</el-button>
    <address-list
      ref="addressList"
      @setAddress="setAddress"
    />
  </div>
</template>

<script>
import { addOrder } from '@/api/mall/order'
import { deleteCartById } from '@/api/mall/cart'
import { getUserDefaultAddress } from '@/api/mall/address'
import AddressList from './components/AddressList.vue'
export default {
  components: { AddressList },
  data() {
    return {
      productList: [{
        productId: 1,
        productName: '肉桂粉',
        productDesc: '用于烹饪、烘焙和调味的肉桂粉末。',
        productPicture: 'http://49.234.45.35:10000/images/protPicture/1707142604085cinnamon_powder.png',
        productPrice: 10.2,
        number: 1,
        traceId: '1758472867175014401'
      }],
      order: {
        totalPrice: 0
      },
      type: 0,
      address: {}
    }
  },
  created() {
    const product = this.$route.params.product
    const type = this.$route.params.type
    const productList = this.$route.params.productList
    if (type) {
      this.type = type
      if (type == 1) {
        this.productList = []
        this.productList.push(JSON.parse(product))
      } else {
        this.productList = JSON.parse(productList)
      }
    }
    this.updateTotalPrice()
    this.$getUserId().then(userId => {
      getUserDefaultAddress(userId).then(res => {
        this.address = res.data
      })
    })
  },
  methods: {
    async submitOrder() {
      if (!this.address.addressId) {
        this.$message({
          message: '请选择地址',
          type: 'error'
        })
        return
      }
      const userId = await this.$getUserId()
      const orderList = this.productList.map(item => {
        return {
          productId: item.productId,
          productName: item.productName,
          protTraceId: item.traceId,
          productDesc: item.productDesc,
          productPicture: item.productPicture,
          productPrice: item.productPrice,
          productNumber: item.productNumber,
          protTraceId: item.traceId
        }
      })
      const order = {
        userId: userId,
        addressId: this.address.addressId,
        orderItemsList: orderList
      }
      addOrder(order).then(res => {
        if (res.flag) {
          this.$message({
            message: res.message,
            type: 'success'
          })
          // 删除购物车
          if (this.type == 2) {
            this.productList.forEach(item => {
              deleteCartById(item.shoppingCartId)
            })
          }
          this.$router.puth('/shop-order')
        }
      })
    },
    openAddressList() {
      this.$refs.addressList.init()
    },
    setAddress(address) {
      this.address = address
      console.log('address', this.address)
    },
    updateTotalPrice() {
      this.order.totalPrice = 0
      this.productList.forEach(item => {
        this.order.totalPrice += Number(item.productPrice * item.productNumber)
        this.order.totalPrice = Number(this.order.totalPrice.toFixed(2))
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.product {
  width: 1000px;
  display: flex;
  margin: 10px 0;
  border-bottom: 1px solid #999;
  padding-bottom: 10px;

  .product-img {
    width: 120px;
    height: 100px;
    object-fit: cover;
  }

  .product-name {
    width: 200px;
    margin: 0 20px;
    font-style: bold;
  }

  .product-desc {
    width: 250px;
    margin: 0 20px;
  }

  .product-price {
    width: 100px;
    margin: 0 20px;
  }

  .product-number {
    width: 100px;
  }
}
.address {
  border-bottom: 1px solid #999;
  padding: 10px 0;
  height: 100px;

  .addressInfo {
    float: left;
    display: flex;

    div {
      margin-right: 20px;
    }
  }

  .addressSelectBtn {
    float: right;
  }
}

.totalPrice {
  color: red;
  font-size: 24px;
  margin-bottom: 10px;
}
</style>
